<template>
	<view class="container">
		<u-navbar :title="$t('home.invite_friends')" placeholder bgColor="#12be98" leftIconColor="#FFFFFF"
			:rightText="$t('home.proxy_rules')" titleStyle="color: #FFFFFF" autoBack @rightClick="hanldeRightClick">
		</u-navbar>
		<view class="content">
			<view class="pad-left-right-15 mar-top-20" style="height: 50.7246vw;">
				<view class="color-fff font-36 mar-bottom-20">{{$t('home.inviting_friends_earn_together')}}</view>
				<view class="color_fffef0 font-26">{{$t('home.inviting_content')}}</view>
			</view>

			<view class="wt-card">
				<view class="wt-wx">
					<up-qrcode :size="130" :val="inviteLink"></up-qrcode>
					<view class="mar-bottom-20 mar-top-20 font-28">
						{{$t('my.invitation_code')}}：{{store.userInfo.invite_code}}
					</view>
					<view class="copy-code" @click="handCopyInviteLink(store.userInfo.invite_code)">{{$t('home.copy')}}
					</view>
				</view>

				<view class="link-panel">
					<view class="font-28">{{$t('home.recommended_links')}}</view>
					<view class="mar-top-11 font-24">{{inviteLink}}</view>
					<view class="copy-code mar-top-13" @click="handCopyInviteLink(inviteLink)">{{$t('home.copy')}}
					</view>
				</view>

				<view class="share-cell">
					<view class="col" @click="openDefaultEmailClient('line')">
						<image src="/static/image/line.png" mode="" />
						<text>Line</text>
					</view>
					<view class="col" @click="openDefaultEmailClient('sms')">
						<image src="/static/image/sms.png" mode="" />
						<text>SMS</text>
					</view>
					<view class="col" @click="openDefaultEmailClient('email')">
						<image src="/static/image/email.png" mode="" />
						<text>Email</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		useI18n
	} from 'vue-i18n'
	import {
		BASE_LINK_URL
	} from '@/common/config'
	import {
		useStore
	} from '@/store/commonStore'
	import {
		getSetting
	} from '@/api/index'

	const {
		t
	} = useI18n()
	const store = useStore()
	const inviteLink = ref(`${BASE_LINK_URL}/?code=${store.userInfo.invite_code}#/`)
	// 跳转规则
	const hanldeRightClick = () => {
		uni.navigateTo({
			url: '/pages/show-rich-text/show-rich-text?type=sharing'
		})
	}

	// 复制邀请连接
	const handCopyInviteLink = (content) => {
		if (!content) return;
		uni.setClipboardData({
			data: content,
			success: () => {
				uni.$u.toast(t('my.copy_successful'))
			}
		})
	}
	// 
	const openDefaultEmailClient = async (type) => {
		let params = {
			"line": "open_line_link",
			"sms": "open_sms_link",
			"email": "open_email_link"
		};

		const res = await getSetting({
			codes: [params[type]]
		});

		switch (type) {
			case 'line':
				// #ifdef APP-PLUS
				plus.runtime.openURL(res.data.setting.open_line_link);
				// #endif

				// #ifdef H5
				window.location.href = res.data.setting.open_line_link;
				// #endif
				break;
			case 'sms':
				// #ifdef APP-PLUS
				plus.runtime.openURL(res.data.setting.open_sms_link);
				// #endif

				// #ifdef H5
				window.location.href = res.data.setting.open_sms_link;
				// #endif
				break;
			case 'email':
				const mailtoUrl = 'mailto:'
				// #ifdef APP-PLUS
				plus.runtime.openURL(mailtoUrl);
				// #endif

				// #ifdef H5
				window.location.href = mailtoUrl;
				// #endif
				break;
			default:
				break;
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 90vh;
		background: url('/static/image/invte-bg.png') top no-repeat;
		background-size: contain;

		.content {
			padding: 3.6232vw;
			box-sizing: border-box;

			.wt-card {
				position: relative;
				padding: 4.8309vw;
				margin-bottom: 3.8647vw;
				border-radius: 1.9324vw;
				background: #fff;
				box-shadow: 0 1.2077vw 4.8309vw rgba(59, 72, 92, .07);

				.wt-wx {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					padding: 3.6232vw;
					text-align: center;
					margin-bottom: 2.4155vw;
				}

				.copy-code {
					width: 27.5362vw;
					height: 7.7295vw;
					border-radius: 7.7295vw;
					font-size: 3.8647vw;
					background-color: #ffc820;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.share-cell {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 7.2464vw 0;
					font-size: 3.3816vw;
					text-align: center;

					.col {
						display: flex;
						flex-direction: column;
						align-items: center;

						image {
							width: 37px;
							height: 37px;
						}
					}
				}
			}
		}
	}

	:deep(.u-navbar__content__right__text) {
		color: #ffffff;
	}
</style>